<!--
	危化企业类型
	Created by Penglei on 2023/08/17
-->
<template>
	<div class="pag-level-surface">
		<el-radio-group v-model="enterpriseType" @change="onChange">
			<el-radio v-for="(item, index) in list" :key="index" :label="item.value">{{ item.label || '' }}</el-radio>
		</el-radio-group>
		<el-divider class="divider" border-style="dashed" />
		<div class="legend">
			<div class="legend-title">
				<el-divider direction="vertical" />图例
			</div>
			<ul class="legend-list">
				<li class="legend-list-item" v-for="(item, index) in list" :key="index">
					<span class="legend-list-item-icon" :style="{ backgroundColor: item.color || false }"></span>
					{{ item.label || '' }}
				</li>
			</ul>
		</div>
	</div>
</template>

<script setup name="PagLevelSurface">
// 组件事件监听
const emit = defineEmits(['change']);

// 当前类型
let enterpriseType = ref('0'); //null
// 类型列表
const list = [
	{ label: '50年超越概率2%', value: '0', color: '#FFC95D' },
	{ label: '50年超越概率10%', value: '1', color: '#FFB624' },
	{ label: '50年超越概率63%', value: '2', color: '#FF9100' },
];
// 选项选择切换事件
const onChange = (value) => {
	// 修改当前类型
	emit('change', value);
}
</script>

<style lang="scss" scoped>
.pag-level-surface {
	padding: 5px;
	color: #FFFFFF;

	// 类型选择
	.el-radio-group {
		padding: 10px 15px;

		.el-radio {
			width: 175px;
			color: #FFFFFF;
			font-size: 18px;
			margin-bottom: 12px;
			margin-right: 30px;
		}
	}

	.divider {
		border-color: #475ADB;
		margin: -5px 0 20px;
	}

	// 图例
	.legend {
		&-title {
			font-size: 18px;

			.el-divider {
				border-width: 3px;
				margin-top: -3px;
			}
		}

		// 图例列表
		&-list {
			margin: 12px auto 0;
			padding: 0 15px;
			font-size: 16px;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			align-items: center;

			&-item {
				width: 50%;
				margin-bottom: 12px;

				&-icon {
					display: inline-block;
					vertical-align: middle;
					width: 20px;
					height: 12px;
					border-radius: 5px;
					margin-top: -2px;
					margin-right: 10px;
				}
			}
		}
	}
}
</style>